<template>
  <view class="forgot-container">
    <!-- 主表单 -->
    <view class="forgot-form">
      <!-- 标题区域 -->
      <view class="title-section">
        <text class="main-title">设置新密码</text>
      </view>

      <!-- 输入区域 -->
      <view class="input-section">
        <!-- 手机号输入框 -->
        <view class="input-group">
          <input v-model="phoneNumber" placeholder="请输入手机号" class="input-field" type="number" maxlength="11" />
        </view>

        <!-- 验证码输入框 -->
        <view class="input-group">
          <input v-model="verificationCode" placeholder="请输入验证码" class="input-field" type="number" maxlength="6" />
          <text class="get-code-btn" @click="getVerificationCode" :class="{ disabled: countdown > 0 }">
            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
          </text>
        </view>

        <!-- 新密码输入框 -->
        <view class="input-group">
          <input v-model="newPassword" placeholder="密码(6-20位字母数字组合)" class="input-field" type="password"
            maxlength="20" />
        </view>

        <!-- 确认密码输入框 -->
        <view class="input-group">
          <input v-model="confirmPassword" placeholder="再次输入密码" class="input-field" type="password" maxlength="20" />
        </view>
      </view>

      <!-- 完成按钮 -->
      <button class="complete-button" @click="handleResetPassword" :disabled="!isFormValid">
        完成
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRequest } from '@/api'

const { API_SMS_SEND, API_UPDATE_PWD } = useRequest()
// 响应式数据
const phoneNumber = ref('')
const verificationCode = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const countdown = ref(0)

// 表单验证
const isFormValid = computed(() => {
  return phoneNumber.value &&
    verificationCode.value &&
    newPassword.value &&
    confirmPassword.value &&
    newPassword.value === confirmPassword.value &&
    newPassword.value.length >= 6 &&
    newPassword.value.length <= 20
})

// 获取验证码
async function getVerificationCode() {
  if (!phoneNumber.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }

  if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  if (countdown.value > 0) {
    return
  }

  try {
    uni.showLoading({ title: '发送中...' })
    const params = { mobile: phoneNumber.value, event: 'resetpwd' }
    const res = await API_SMS_SEND(params)
    if (res.code === 1) {
      uni.showToast({ title: '验证码已发送', icon: 'success' })
      // 开始倒计时
      countdown.value = 60
      const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    } else {
      uni.showToast({ title: res.msg || '发送失败', icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: '发送失败，请重试', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

// 重置密码处理
async function handleResetPassword() {
  // 验证手机号
  if (!phoneNumber.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }

  if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  // 验证验证码
  if (!verificationCode.value) {
    uni.showToast({ title: '请输入验证码', icon: 'none' })
    return
  }


  // 验证新密码
  if (!newPassword.value) {
    uni.showToast({ title: '请输入新密码', icon: 'none' })
    return
  }

  if (newPassword.value.length < 6 || newPassword.value.length > 20) {
    uni.showToast({ title: '密码长度应为6-20位', icon: 'none' })
    return
  }

  // 验证密码强度（字母数字组合）
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/.test(newPassword.value)) {
    uni.showToast({ title: '密码必须包含字母和数字', icon: 'none' })
    return
  }

  // 验证确认密码
  if (!confirmPassword.value) {
    uni.showToast({ title: '请再次输入密码', icon: 'none' })
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
    return
  }

  try {
    uni.showLoading({ title: '提交中...' })
    const params = {
      mobile: phoneNumber.value,
      captcha: verificationCode.value,
      newpassword: newPassword.value,
      repassword: confirmPassword.value,
    }
    const res = await API_UPDATE_PWD(params)
    if (res.code === 1) {
      uni.showToast({ title: '密码重置成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1200)
    }
  } catch (error) {
    
  } finally {
    uni.hideLoading()
  }
}
</script>

<style scoped>
.forgot-container {
  min-height: 100vh;
  background: #fff;
  padding: 40rpx 60rpx;
  position: relative;
  border-left: 4rpx solid #007AFF;
  border-bottom: 4rpx solid #007AFF;
}

/* 主表单 */
.forgot-form {
  margin-top: 120rpx;
}

/* 标题区域 */
.title-section {
  margin-bottom: 80rpx;
}

.main-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

/* 输入区域 */
.input-section {
  margin-bottom: 60rpx;
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
  background: #F5F5F5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  background: transparent;
  border: none;
  outline: none;
}

.get-code-btn {
  color: #FF6B35;
  font-size: 28rpx;
  margin-left: 20rpx;
  white-space: nowrap;
}

.get-code-btn.disabled {
  color: #999;
}

/* 完成按钮 */
.complete-button {
  width: 100%;
  height: 88rpx;
  background: #FF6B35;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  border: none;
}

.complete-button:disabled {
  background: #ccc;
}
</style>
